<template>
  <div>
    <div>
      <div class="font15 mt10 pl10">
        <span class="titletext ">{{titledata.title}}</span>
        <div class="graytext  mt10 font13">
          <span>工单编号:</span>
          <span class="titletext">{{titledata.pmInsId}}</span>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">项目信息</span>
      </div>

      <van-cell-group>
        <van-field readonly required name="projectName" :value="fromdata.projectName" label="项目名称:" label-width="5em" />
        <van-field readonly required name="projectID" :value="fromdata.projectID" label="项目编号:" label-width="5em" />
        <van-field readonly required name="customerName" :value="fromdata.customerName" label="集团客户名称:"
          label-width="7em" />
        <van-field readonly required name="customerCode" :value="fromdata.customerCode" label="集团客户编号:"
          label-width="7em" />
        <van-field readonly required name="customerLevel" :value="fromdata.customerLevel" label="集团客户等级:"
          label-width="7em" />
        <van-field readonly required name="city" :value="fromdata.city" label="地市:" label-width="3em" />
        <van-field readonly required name="counties" :value="fromdata.counties" label="县区:" label-width="3em" />
        <van-field readonly required name="publicCountyCodeValue" :value="fromdata.publicCountyCodeValue" label="县域组织(公开市场)：" label-width="10em" />
        <van-field v-if="fromdata.projectServiceContent!='纯运维'" readonly required name="actualDeliveryTime" :value="fromdata.actualDeliveryTime" label="终验时间:"
          label-width="5em" />
        <van-field readonly required name="competitiveMode" :value="fromdata.competitiveMode" label="项目模式:"
          label-width="5em" />
        <van-field v-if="fromdata.projectServiceContent=='纯运维'" readonly name="buildType" :value="fromdata.buildType" label="项目立项类型:"
                   label-width="7em" />
        <van-field readonly name="projectServiceContent" :value="fromdata.projectServiceContent" label="项目实施类型:"
          label-width="7em" />
        <van-field v-if="fromdata.projectServiceContent=='纯运维'" readonly name="preProjectGrade" :value="fromdata.preProjectGrade" label="售前阶段项目定级:"
                   label-width="9em" />
        <van-field readonly required name="autonomousImplemention" :value="fromdata.autonomousImplemention"
          label="是否自主实施:" label-width="7em" />
        <van-field readonly required name="autonomousImplementionType"
          :value="fromdata.autonomousImplementionType" label="项目自主实施类型:" label-width="9em" />
        <van-field v-if="fromdata.autonomousImplemention == '是'" readonly required name="autImplementScope"
          :value="fromdata.autImplementScope" label="自主实施范围:" label-width="7em" />
        <van-field v-if="fromdata.projectServiceContent=='纯运维'" readonly name="projectGradeFinal" :value="fromdata.projectGradeFinal" label="售后阶段项目定级:"
                   label-width="9em" />
      </van-cell-group>


      <!-- 军团项目 -->
      <van-cell-group>
        <van-field readonly required name="isLegionProject"
          :value="fromdata.isLegionProject ? fromdata.isLegionProject : '否'" label="是否军团项目:" label-width="7em"
          :right-icon="isLegionProjectEditable ? 'arrow' : ''"
          @click="isLegionProjectShowPopupView = isLegionProjectEditable"
          :rules="[{ required: isLegionProjectEditable, message: '请选择是否是军团项目' }]" />
        <van-popup v-model="isLegionProjectShowPopupView" position="bottom" get-container="body">
          <van-picker show-toolbar :value-key="'value'" :columns="isLegionProjectPopupColumns"
            @confirm="isLegionProjectClickConfirm" @cancel="isLegionProjectShowPopupView = false" />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="fromdata.isLegionProject === '是'">

        <van-field readonly name="industryLegion" :value="fromdata.industryLegion" label="行业军团:" label-width="5em"
          :right-icon="isLegionProjectEditable ? 'arrow' : ''" @click="industryLegionClick" />
        <van-popup v-model="industryLegionShowPopupView" position="bottom" get-container="body">
          <van-picker show-toolbar :value-key="'value'" :columns="industryLegionPopupColumns"
            @confirm="industryLegionClickConfirm" @cancel="industryLegionShowPopupView = false" />
        </van-popup>

        <van-field readonly name="productLegion" :value="fromdata.productLegion" label="产品军团:" label-width="5em"
          :right-icon="isLegionProjectEditable ? 'arrow' : ''" @click="productLegionClick" />
        <van-popup v-model="productLegionShowPopupView" position="bottom" get-container="body">
          <van-picker show-toolbar :value-key="'value'" :columns="productLegionPopupColumns"
            @confirm="productLegionClickConfirm" @cancel="productLegionShowPopupView = false" />
        </van-popup>
        <div class="redtext font11" style="margin: 5px 15px 0px 15px;">
          军团标签需至少选择其中之一，支持选择两类标签
        </div>

        <van-field readonly name="industryLegionUnits" :value="fromdata.industryLegionUnits" label="行业军团项目支撑单位:"
          label-width="11em" :right-icon="isLegionProjectEditable ? 'arrow' : ''" @click="industryLegionUnitsClick" />
        <van-popup v-model="industryLegionUnitsShowPopupView" position="bottom" get-container="body">
          <van-picker show-toolbar :value-key="'value'" :columns="industryLegionUnitsPopupColumns"
            @confirm="industryLegionUnitsClickConfirm" @cancel="industryLegionUnitsShowPopupView = false" />
        </van-popup>

        <van-field readonly name="productLegionUnits" :value="fromdata.productLegionUnits" label="产品军团项目支撑单位:"
          label-width="11em" :right-icon="isLegionProjectEditable ? 'arrow' : ''" @click="productLegionUnitsClick" />
        <van-popup v-model="productLegionUnitsShowPopupView" position="bottom" get-container="body">
          <van-picker show-toolbar :value-key="'value'" :columns="productLegionUnitsPopupColumns"
            @confirm="productLegionUnitsClickConfirm" @cancel="productLegionUnitsShowPopupView = false" />
        </van-popup>

        <van-field readonly name="isDifficultProject" :value="fromdata.isDifficultProject" label="是否重点难点项目:"
          label-width="9em" :right-icon="isLegionProjectEditable ? 'arrow' : ''"
          @click="isDifficultProjectShowPopupView = isLegionProjectEditable"
          :rules="[{ required: isLegionProjectEditable, message: '请选择是否重点难点项目' }]" />
        <van-popup v-model="isDifficultProjectShowPopupView" position="bottom" get-container="body">
          <van-picker show-toolbar :value-key="'value'" :columns="isLegionProjectPopupColumns"
            @confirm="isDifficultProjectClickConfirm" @cancel="isDifficultProjectShowPopupView = false" />
        </van-popup>
        <div v-if="fromdata.isDifficultProject === '是'"
          style="display: flex; justify-content: flex-end; align-items: center; height: 50px;">
          <el-button type="primary" size="small" icon="search" style="margin-right: 16px;"
            @click="jtxm_lxr_showPopupView = true">
            查看军团联系人
          </el-button>
        </div>
        <page-select-xm-list v-if="jtxm_lxr_showPopupView" v-on:update-flag="jtxm_lxr_showPopupView = false"
          v-on:select-item="handleSelectItem" pageTitle="军团联系人.列表" url="legionContracts$api$findAll"
          :withoutKV="{ 'direction': 'desc', 'properties': 'createdTime' }" :withoutBody="{}">
          <template #body="{ item }">
            <div>
              <div class="titlefont"> 军团名称： {{ item.legionName }}</div>
              <div class="infosfont"> 联系人： {{ item.contract }}</div>
              <div class="infosfont"> 电话： {{ item.contractPhone }}</div>
              <div class="infosfont"> 邮箱： {{ item.email }}</div>
            </div>
          </template>
        </page-select-xm-list>

        <div class="redtext font11" style="margin: 5px 15px 0px 15px;">
          重点:战略、头部、战新客户；难点:省公司无法自行解决，需集团特派员协调。
        </div>
        <van-field v-if="fromdata.isDifficultProject === '是'" :readonly="!isLegionProjectEditable" autosize
          type="textarea" rows="1" name="reason" v-model="fromdata.reason" label="重点难点项目说明:" label-width="9em" />

      </van-cell-group>




      <!-- 附件区 -->
      <div v-if="showCBView">
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">承办</span>
        </div>

        <van-field readonly required name="decisionResult" :value="fromdata.decisionResult" label="决策结果:"
          label-width="5em" />
        <van-field readonly required name="operationFile" label="运维方案:" label-width="5em" />
        <div v-for="(fileitem) in fromdata.operationFile" :key="fileitem.id" style="margin-left:20px">
          <div readonly class="font14 fileLink" style="color:#0F85CF">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
        </div>

        <van-field readonly required name="faultList" label="故障处理时限:" label-width="7em" />
        <el-table :data="fromdata.faultList" border style="width: 100%">
          <el-table-column prop="faultLevel" label="故障等级" />
          <el-table-column prop="solveTime" label="故障处理时限(小时)" />
        </el-table>
      </div>

      <historyAndSuggs id='target' :showHistory='showHistory' :historydata='historydata' :approveList='approveList' />

    </div>
  </div>
</template>
 
<script>

import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue"
import { openFileUrl } from '@/store/openFile'
import { getDictList } from "@/api/dictapi";
import { Toast } from 'vant';
import { mapGetters } from 'vuex';
import PageSelectXmList from '/src/components/page_select_xm_list/index.vue';

export default {
  data() {
    return {


      isDifficultProjectShowPopupView: false,
      isLegionProjectShowPopupView: false,
      isLegionProjectPopupColumns: [{ 'name': '是', 'value': '是' },
        { 'name': '否', 'value': '否' }],

      industryLegionShowPopupView: false,
      industryLegionPopupColumns: [],

      industryLegionDict: {
        '安全+军团': '启明星辰',
        '视觉+军团': '物联网公司',
        '智慧公安军团': '集成公司',
        '应急管理军团': '集成公司',
        '新型工业化军团': '上研院',
        '智慧校园军团': '成研院',
        'AI+军团': '云能力中心',
        '车联网军团': '上研院'
      }, // 各军团和专业公司对应关系

      industryLegionUnitsShowPopupView: false,
      industryLegionUnitsPopupColumns: [],

      productLegionShowPopupView: false,
      productLegionPopupColumns: [],

      productLegionUnitsShowPopupView: false,
      productLegionUnitsPopupColumns: [],

      jtxm_lxr_showPopupView: false,
    }
  },

  props: ['params', 'titledata','businessdata','fromdata','showHistory','historydata','approveList','showCBView'],

  computed: {

    ...mapGetters(["user"]),

    // 军团项目 可否编辑
    isLegionProjectEditable() {

      return this.params.location === 'dict.start' || this.params.isDrawup == '1';
    },


  },

  methods: {
     tomsg () {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    openFileUrlfun(value) {
      this.$router.push(
        {
          name: 'fileview',
          query: {
            openFileUrl: openFileUrl(value)
          }
        }
      );
    },

    // 查看联系人信息，点击无回调
    handleSelectItem(value) {

      this.jtxm_lxr_showPopupView = false;

    },

    // TODO: 网络请求
    requestAlertInfo(value, callback) {

      Toast.loading({ message: "加载中", forbidClick: false });
      getDictList(value, { userName: this.user.userName }).then((result) => {
        Toast.clear();
        if (!result.data) {
          Notify(result.message);
          return;
        }

        if (result.data.data) {
          callback(result.data.data);
        }
      });
    },


    // TODO:弹窗显示
    industryLegionClick() {

      if (this.isLegionProjectEditable) {

        if (this.industryLegionPopupColumns.length == 0) {

          this.requestAlertInfo('industryLegion', (data) => {

            this.industryLegionPopupColumns = data;
            this.industryLegionShowPopupView = true;
          });
        }
        else {
          this.industryLegionShowPopupView = true;
        }
      }
    },

    productLegionClick() {

      if (this.isLegionProjectEditable) {
        if (this.productLegionPopupColumns.length == 0) {

          this.requestAlertInfo('productLegion', (data) => {

            this.productLegionPopupColumns = data;
            this.productLegionShowPopupView = true;
          });
        }
        else {
          this.productLegionShowPopupView = true;
        }
      }

    },

    industryLegionUnitsClick() {

      if (this.isLegionProjectEditable) {
        if (this.industryLegionUnitsPopupColumns.length == 0) {

          this.requestAlertInfo('legionUnits', (data) => {

            this.industryLegionUnitsPopupColumns = data;
            this.industryLegionUnitsShowPopupView = true;
          });
        }
        else {
          this.industryLegionUnitsShowPopupView = true;
        }

      }

    },

    productLegionUnitsClick() {

      if (this.isLegionProjectEditable) {

        if (this.productLegionUnitsPopupColumns.length == 0) {

          this.requestAlertInfo('legionUnits', (data) => {

            this.productLegionUnitsPopupColumns = data;
            this.productLegionUnitsShowPopupView = true;
          });
        }
        else {
          this.productLegionUnitsShowPopupView = true;
        }
      }

    },

    // TODO: 弹窗回调事件
    isLegionProjectClickConfirm(value) {

      this.isLegionProjectShowPopupView = false;
      this.fromdata.isLegionProject = value.name;
    },

    isDifficultProjectClickConfirm(value) {

      this.isDifficultProjectShowPopupView = false;
      this.fromdata.isDifficultProject = value.name;
    },

    industryLegionClickConfirm(value) {

      this.industryLegionShowPopupView = false;
      this.fromdata.industryLegion = value.name;

      let val = this.industryLegionDict[value.name];
      this.fromdata.industryLegionUnits = val;
    },

    industryLegionUnitsClickConfirm(value) {

      this.industryLegionUnitsShowPopupView = false;
      this.fromdata.industryLegionUnits = value.name;
    },

    productLegionClickConfirm(value) {

      this.productLegionShowPopupView = false;
      this.fromdata.productLegion = value.name;

      let val = this.industryLegionDict[value.name];
      this.fromdata.productLegionUnits = val;
    },

    productLegionUnitsClickConfirm(value) {

      this.productLegionUnitsShowPopupView = false;
      this.fromdata.productLegionUnits = value.name;
    },




  },


  components: {
    historyAndSuggs,
    PageSelectXmList

  },
}
</script>
 
<style>
.tables.el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 15px;
  padding-left: 5px;
  padding-right: 5px;
}
</style>